<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" prop="_id" width="220"> </el-table-column>
      <el-table-column label="分类名称" prop="name" width="180"> </el-table-column>
      <el-table-column label="子分类名称" prop="parent.name" width="200"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
      <el-form :model="dialogEditForm">
        <el-form-item label="分类名称">
          <el-input v-model="dialogEditForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSave(dialogEditForm)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, edit, save, remove } from '../api/module/categories'
export default {
  data () {
    return {
      dialogFormVisible: false,
      tableData: [{
        _id: '',
        name: '',
      }],
      /**编辑 */
      dialogEditForm: {
        name: '',
        _id: ''
      }
    }
  },
  methods: {
    /**编辑 */
    handleEdit (params) {
      this.dialogFormVisible = true;
      edit(params).then((result) => {
        this.dialogEditForm = result
      })
      // console.log(params);
    },
    /**编辑保存 */
    dialogSave (data) {
      save(data).then(() => {
        this.dialogFormVisible = false;
      })
    },
    /**删除 */
    handleDelete (data) {
      console.log(data);
      remove(data).then(() => {
        this.search()
      })
    },
    /**查询列表 */
    search () {
      list().then((result) => {
        this.tableData = result
      })
    }
  },
  mounted () {
    this.search()
  },
} 
</script>